<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排班考勤系统</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 统一的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E40AF', // 企业蓝
                        secondary: '#F97316', // 橙色
                        success: '#10B981', // 绿色
                        warning: '#F59E0B', // 黄色
                        danger: '#EF4444', // 红色
                        info: '#3B82F6', // 蓝色
                        light: '#F3F4F6', // 浅灰色
                        dark: '#1F2937', // 深灰色
                        'gray-medium': '#6B7280', // 中灰色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .wx-container {
                max-width: 480px;
                margin: 0 auto;
                background-color: #F9FAFB;
                min-height: 100vh;
                font-family: 'Inter', system-ui, sans-serif;
                position: relative;
            }
            .wx-page {
                display: none;
            }
            .wx-page.active {
                display: block;
            }
            .tab-bar {
                display: flex;
                border-bottom: 1px solid #E5E7EB;
                background-color: white;
            }
            .tab-item {
                flex: 1;
                text-align: center;
                padding: 12px 0;
                font-size: 16px;
                color: #6B7280;
                position: relative;
                cursor: pointer;
            }
            .tab-item.active {
                color: #1E40AF;
                font-weight: 500;
            }
            .tab-item.active::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 3px;
                background-color: #1E40AF;
                border-radius: 3px 3px 0 0;
            }
            .tab-content {
                display: none;
            }
            .tab-content.active {
                display: block;
            }
            .card {
                background-color: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                margin-bottom: 16px;
            }
            .card-header {
                padding: 16px;
                border-bottom: 1px solid #E5E7EB;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .card-title {
                font-size: 16px;
                font-weight: 500;
                color: #1F2937;
            }
            .card-body {
                padding: 16px;
            }
            .form-group {
                margin-bottom: 16px;
            }
            .form-label {
                display: block;
                margin-bottom: 8px;
                font-size: 14px;
                color: #1F2937;
                font-weight: 500;
            }
            .form-control,
            .form-select,
            .form-textarea {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #D1D5DB;
                border-radius: 6px;
                font-size: 14px;
                color: #1F2937;
                background-color: white;
            }
            .form-control:focus,
            .form-select:focus,
            .form-textarea:focus {
                outline: none;
                border-color: #3B82F6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }
            .form-textarea {
                min-height: 100px;
                resize: vertical;
            }
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 10px 16px;
                font-size: 14px;
                font-weight: 500;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .btn-primary {
                background-color: #1E40AF;
                color: white;
            }
            .btn-primary:hover {
                background-color: #1E3A8A;
            }
            .btn-secondary {
                background-color: #F97316;
                color: white;
            }
            .btn-secondary:hover {
                background-color: #EA580C;
            }
            .btn-outline {
                border: 1px solid #D1D5DB;
                color: #1F2937;
                background-color: white;
            }
            .btn-outline:hover {
                background-color: #F3F4F6;
            }
            .btn-block {
                display: block;
                width: 100%;
            }
            .badge {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 9999px;
                font-size: 12px;
                font-weight: 500;
            }
            .badge-primary {
                background-color: #DBEAFE;
                color: #1E40AF;
            }
            .badge-success {
                background-color: #D1FAE5;
                color: #059669;
            }
            .badge-warning {
                background-color: #FEF3C7;
                color: #D97706;
            }
            .badge-danger {
                background-color: #FEE2E2;
                color: #B91C1C;
            }
            .profile-header {
                background-color: white;
                padding: 24px 16px;
                text-align: center;
                border-bottom: 1px solid #E5E7EB;
            }
            .profile-avatar {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                object-fit: cover;
                margin-bottom: 12px;
                border: 4px solid #F3F4F6;
            }
            .profile-name {
                font-size: 20px;
                font-weight: 500;
                color: #1F2937;
                margin-bottom: 4px;
            }
            .profile-role {
                font-size: 14px;
                color: #6B7280;
                margin-bottom: 16px;
            }
            .profile-stats {
                display: flex;
                justify-content: space-around;
            }
            .profile-stat {
                text-align: center;
            }
            .profile-stat-value {
                font-size: 20px;
                font-weight: 500;
                color: #1F2937;
                margin-bottom: 4px;
            }
            .profile-stat-label {
                font-size: 12px;
                color: #6B7280;
            }
            .setting-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px;
                background-color: white;
                border-bottom: 1px solid #E5E7EB;
            }
            .setting-item:last-child {
                border-bottom: none;
            }
            .setting-icon {
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;
                color: #1E40AF;
            }
            .setting-label {
                flex: 1;
                font-size: 16px;
                color: #1F2937;
            }
            .setting-value {
                font-size: 14px;
                color: #6B7280;
                text-align: right;
            }
            .leave-item {
                background-color: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                padding: 16px;
                margin-bottom: 16px;
            }
            .leave-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
            }
            .leave-name {
                font-size: 16px;
                font-weight: 500;
                color: #1F2937;
            }
            .leave-type {
                padding: 2px 8px;
                border-radius: 9999px;
                font-size: 12px;
                font-weight: 500;
            }
            .leave-type-personal {
                background-color: #DBEAFE;
                color: #1E40AF;
            }
            .leave-type-sick {
                background-color: #D1FAE5;
                color: #059669;
            }
            .leave-type-annual {
                background-color: #C4B5FD;
                color: #6D28D9;
            }
            .leave-type-overtime {
                background-color: #FED7AA;
                color: #C2410C;
            }
            .leave-dates {
                font-size: 14px;
                color: #6B7280;
                margin-bottom: 8px;
            }
            .leave-reason {
                font-size: 14px;
                color: #1F2937;
                margin-bottom: 8px;
            }
            .leave-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12px;
                color: #6B7280;
            }
            .leave-status {
                font-weight: 500;
            }
            .leave-status-pending {
                color: #F59E0B;
            }
            .leave-status-approved {
                color: #10B981;
            }
            .leave-status-rejected {
                color: #EF4444;
            }
            .modal {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
            }
            .modal.active {
                opacity: 1;
                visibility: visible;
            }
            .modal-content {
                background-color: white;
                border-radius: 8px;
                width: 90%;
                max-width: 400px;
                max-height: 80vh;
                overflow-y: auto;
                transform: translateY(-20px);
                transition: transform 0.3s ease;
            }
            .modal.active .modal-content {
                transform: translateY(0);
            }
            .modal-header {
                padding: 16px;
                border-bottom: 1px solid #E5E7EB;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .modal-title {
                font-size: 18px;
                font-weight: 500;
                color: #1F2937;
            }
            .modal-close {
                background: none;
                border: none;
                font-size: 20px;
                color: #6B7280;
                cursor: pointer;
            }
            .modal-body {
                padding: 16px;
            }
            .modal-footer {
                padding: 16px;
                border-top: 1px solid #E5E7EB;
                display: flex;
                justify-content: flex-end;
                gap: 8px;
            }
            .schedule-table-container {
                overflow-x: auto;
                background-color: white;
                border-bottom: 1px solid #E5E7EB;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .schedule-table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
            }
            .schedule-table th,
            .schedule-table td {
                border: 1px solid #E5E7EB;
                padding: 10px 8px;
                text-align: center;
                min-width: 70px;
                transition: all 0.2s ease;
            }
            .schedule-table th {
                background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
                color: white;
                font-weight: 500;
                font-size: 14px;
                position: sticky;
                top: 0;
                z-index: 10;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            .schedule-table th:first-child {
                position: sticky;
                left: 0;
                z-index: 20;
                background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
                min-width: 120px;
            }
            .schedule-table td:first-child {
                position: sticky;
                left: 0;
                background-color: #F8FAFC;
                font-weight: 500;
                box-shadow: 2px 0 5px rgba(0, 0, 0, 0.03);
                z-index: 5;
            }
            .schedule-table tr:nth-child(even) td:not(:first-child) {
                background-color: #F9FAFB;
            }
            .schedule-table td {
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .schedule-table td:not(:first-child):hover {
                background-color: #EFF6FF;
                transform: translateY(-1px);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            }
            .schedule-cell {
                padding: 6px 4px;
                border-radius: 6px;
                font-size: 12px;
                font-weight: 500;
                min-height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
                transition: all 0.2s ease;
            }
            .schedule-cell:hover {
                transform: scale(1.05);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            .schedule-cell-morning {
                background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
                color: #1E40AF;
                border: 1px solid #93C5FD;
            }
            .schedule-cell-afternoon {
                background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
                color: #C2410C;
                border: 1px solid #FDBA74;
            }
            .schedule-cell-night {
                background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
                color: #4338CA;
                border: 1px solid #A5B4FC;
            }
            .schedule-cell-leave {
                background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
                color: #B91C1C;
                border: 1px solid #FCA5A5;
            }
            .schedule-cell-rest {
                background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
                color: #6B7280;
                border: 1px solid #D1D5DB;
            }
            .schedule-cell-empty {
                background-color: transparent;
            }
            .schedule-cell-midnight1 {
                background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
                color: #4338CA;
                border: 1px solid #A5B4FC;
            }
            .schedule-cell-midnight2 {
                background: linear-gradient(135deg, #DDD6FE 0%, #C4B5FD 100%);
                color: #6D28D9;
                border: 1px solid #A78BFA;
            }
            .schedule-cell-trainmaster {
                background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
                color: #059669;
                border: 1px solid #6EE7B7;
            }
            .schedule-cell-linkman {
                background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%);
                color: #C2410C;
                border: 1px solid #FB923C;
            }
            .employee-info {
                display: flex;
                align-items: center;
                padding: 8px;
            }
            .employee-avatar {
                display: none;
            }
            .employee-name {
                font-size: clamp(14px, 3vw, 16px);
                font-weight: 500;
                color: #1F2937;
                transition: all 0.2s ease;
            }
            .schedule-table tr:hover .employee-name {
                color: #1E40AF;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            .calendar-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                background-color: white;
                border-bottom: 1px solid #E5E7EB;
            }
            .calendar-weekdays {
                display: flex;
                background-color: white;
                border-bottom: 1px solid #E5E7EB;
            }
            .calendar-weekday {
                flex: 1;
                text-align: center;
                padding: 8px;
                font-size: 14px;
                color: #6B7280;
            }
            .calendar-days {
                display: flex;
                flex-wrap: wrap;
                background-color: white;
            }
            .calendar-day {
                width: 14.2857%;
                aspect-ratio: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 8px;
                border-bottom: 1px solid #E5E7EB;
                border-right: 1px solid #E5E7EB;
                position: relative;
            }
            .calendar-day:nth-child(7n) {
                border-right: none;
            }
            .calendar-day.today {
                background-color: #EFF6FF;
                border-radius: 50%;
                width: 36px;
                height: 36px;
                border: 2px solid #3B82F6;
            }
            .calendar-day.has-schedule::after {
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #1E40AF;
                position: absolute;
                bottom: 8px;
            }
            .calendar-day.has-leave::after {
                background-color: #EF4444;
            }
            .calendar-day.has-overtime::after {
                background-color: #F97316;
            }
            .shift-item {
                padding: 12px 16px;
                border-bottom: 1px solid #E5E7EB;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: white;
            }
            .shift-item:last-child {
                border-bottom: none;
            }
            .shift-info {
                display: flex;
                align-items: center;
            }
            .shift-avatar {
                display: none;
            }
            .shift-name {
                font-size: 16px;
                font-weight: 500;
                color: #1F2937;
            }
            .shift-time {
                font-size: 14px;
                color: #6B7280;
                margin-top: 4px;
            }
            .shift-tag {
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
                font-weight: 500;
            }
            .tab-bar-bottom {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                background-color: white;
                border-top: 1px solid #E5E7EB;
                z-index: 50;
                max-width: 480px;
                margin: 0 auto;
            }
            .tab-bar-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 8px 0;
                color: #6B7280;
                font-size: 12px;
            }
            .tab-bar-item.active {
                color: #1E40AF;
            }
            .tab-bar-icon {
                font-size: 20px;
                margin-bottom: 4px;
            }
            .skeleton {
                background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
                background-size: 200% 100%;
                animation: skeleton-loading 1.5s infinite;
            }
            @keyframes skeleton-loading {
                0% {
                    background-position: 200% 0;
                }
                100% {
                    background-position: -200% 0;
                }
            }
            .skeleton-text {
                height: 16px;
                margin-bottom: 8px;
                border-radius: 4px;
            }
            .skeleton-text.short {
                width: 60%;
            }
            .skeleton-text.medium {
                width: 80%;
            }
            .skeleton-text.long {
                width: 100%;
            }
            .skeleton-avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 12px;
            }
            .skeleton-tag {
                width: 60px;
                height: 24px;
                border-radius: 4px;
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="wx-container">
        <!-- 首页/仪表盘 -->
        <div id="home-page" class="wx-page active">
            <div class="bg-primary text-white p-4">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold">排班考勤系统</h1>
                        <p class="text-sm opacity-80" id="current-date">2025年7月21日 星期一</p>
                    </div>
                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/55638b8c21904e299bd54bcb768d9128~tplv-a9rns2rl98-image.image?rcl=2025110623470214AF7F8D0FA5664DAC4D&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765036051&x-signature=W3113BMLjdThi3Ogpp7EHSSUbgs%3D" alt="Logo" class="w-10 h-10">
                </div>
            </div>
            
            <div class="p-4">
                
                <div class="card mt-4">
                    <div class="card-header">
                        <h2 class="card-title">考勤统计</h2>
                        <span class="text-sm text-gray-medium">本月</span>
                    </div>
                    <div class="card-body">
                        <canvas id="attendance-chart" height="200"></canvas>
                    </div>
                </div>
                
                <div class="card mt-4">
                    <div class="card-header">
                        <h2 class="card-title">待办事项</h2>
                    </div>
                    <div class="card-body">
                        <ul class="space-y-3">
                            <!-- 待办事项将通过JavaScript动态生成 -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 排班表 -->
        <div id="schedule-page" class="wx-page">
            <div class="bg-primary text-white p-4">
                <h1 class="text-xl font-bold">排班表</h1>
            </div>
            
            <div class="calendar-header bg-white shadow-sm">
                <button class="text-gray-medium hover:text-primary transition-colors duration-200 p-2 rounded-full hover:bg-gray-100" id="prev-month">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <h2 class="text-lg font-medium text-primary" id="current-month">2025年7月</h2>
                <button class="text-gray-medium hover:text-primary transition-colors duration-200 p-2 rounded-full hover:bg-gray-100" id="next-month">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>
            
            <div class="p-4 bg-white border-b shadow-sm">
                <div class="flex flex-wrap gap-2">
                    <div class="flex items-center mr-4">
                        <div class="schedule-cell schedule-cell-morning mr-2">白班</div>
                    </div>
                    <div class="flex items-center mr-4">
                        <div class="schedule-cell schedule-cell-midnight1 mr-2">下半夜</div>
                    </div>
                    <div class="flex items-center mr-4">
                        <div class="schedule-cell schedule-cell-midnight2 mr-2">上半夜</div>
                    </div>
                    <div class="flex items-center mr-4">
                        <div class="schedule-cell schedule-cell-night mr-2">夜班</div>
                    </div>
                    <div class="flex items-center mr-4">
                        <div class="schedule-cell schedule-cell-trainmaster mr-2">调车长</div>
                    </div>
                    <div class="flex items-center">
                        <div class="schedule-cell schedule-cell-linkman mr-2">连结员</div>
                    </div>
                </div>
            </div>
            
            <div class="schedule-table-container rounded-lg overflow-hidden">
                <table class="schedule-table" id="schedule-table">
                    <thead>
                        <tr id="schedule-header">
                            <!-- 表头将通过JavaScript动态生成 -->
                        </tr>
                    </thead>
                    <tbody id="schedule-body">
                        <!-- 表格内容将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>
            
            <div class="fixed bottom-20 right-4">
                <button class="w-14 h-14 rounded-full bg-secondary text-white flex items-center justify-center shadow-lg hover:bg-orange-600 transition-all duration-300 transform hover:scale-110" id="add-schedule-btn">
                    <i class="fa fa-plus text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 请假加班 -->
        <div id="leave-page" class="wx-page">
            <div class="bg-primary text-white p-4">
                <h1 class="text-xl font-bold">请假加班</h1>
            </div>
            
            <div class="tab-bar">
                <div class="tab-item active" data-tab="leave-list">请假列表</div>
                <div class="tab-item" data-tab="leave-apply">申请</div>
                <div class="tab-item" data-tab="leave-balance-tab">假期余额</div>
            </div>
            
            <div class="p-4">
                <div id="leave-list" class="tab-content active">
                    <div class="flex justify-between items-center mb-4">
                        <div class="relative">
                            <input type="text" placeholder="搜索..." class="form-control pl-10">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-medium"></i>
                        </div>
                        <select class="form-select">
                            <option>全部类型</option>
                            <option>事假</option>
                            <option>病假</option>
                            <option>年假</option>
                            <option>加班</option>
                        </select>
                    </div>
                    
                    <div id="leave-list-container">
                        <!-- 请假列表将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div id="leave-apply" class="tab-content hidden">
                    <form id="leave-form">
                        <div class="form-group">
                            <label class="form-label">申请人</label>
                            <select class="form-select" id="employee-select">
                                <option value="">请选择</option>
                                <!-- 员工列表将通过JavaScript动态生成 -->
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">申请类型</label>
                            <select class="form-select" id="leave-type">
                                <option value="">请选择</option>
                                <option value="annual">年假</option>
                                <option value="marriage">婚假</option>
                                <option value="family">探亲假</option>
                                <option value="maternity">育儿假</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">开始日期</label>
                            <input type="date" class="form-control" id="start-date">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">结束日期</label>
                            <input type="date" class="form-control" id="end-date">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">申请理由</label>
                            <textarea class="form-textarea" id="leave-reason" placeholder="请输入申请理由"></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">假期剩余</label>
                            <div class="flex items-center">
                                <span id="leave-balance" class="text-primary font-medium">0</span>
                                <span class="ml-1">天</span>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary btn-block">提交申请</button>
                    </form>
                </div>
                
                <div id="leave-balance-tab" class="tab-content hidden p-4">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">员工假期余额</h2>
                        </div>
                        <div class="card-body">
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead>
                                        <tr class="border-b">
                                            <th class="py-2 px-4 text-left">员工</th>
                                            <th class="py-2 px-4 text-center">年假</th>
                                            <th class="py-2 px-4 text-center">婚假</th>
                                            <th class="py-2 px-4 text-center">探亲假</th>
                                            <th class="py-2 px-4 text-center">育儿假</th>
                                        </tr>
                                    </thead>
                                    <tbody id="leave-balance-table">
                                        <!-- 假期余额列表将通过JavaScript动态生成 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 我的 -->
        <div id="profile-page" class="wx-page">
            <!-- 只保留系统设置部分，移除了上方的个人信息 -->
            <div class="p-4 pt-6">
                <div class="card mt-4">
                    <div class="card-header">
                        <h2 class="card-title">系统设置</h2>
                    </div>
                    <div class="card-body">
                        <div class="setting-item">
                            <div class="setting-icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <div class="setting-label">员工管理</div>
                            <button id="employee-management-btn" class="btn btn-outline text-sm">管理</button>
                        </div>
                        <div class="setting-item">
                            <div class="setting-icon">
                                <i class="fa fa-cog"></i>
                            </div>
                            <div class="setting-label">系统设置</div>
                            <div class="setting-value">
                                <i class="fa fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="setting-item">
                            <div class="setting-icon">
                                <i class="fa fa-question-circle"></i>
                            </div>
                            <div class="setting-label">帮助中心</div>
                            <div class="setting-value">
                                <i class="fa fa-chevron-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 提醒模态框 -->
        <div id="reminder-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="reminder-title">提醒</h3>
                    <button class="modal-close" id="close-reminder-modal">×</button>
                </div>
                <div class="modal-body" id="reminder-content">
                    <!-- 提醒内容将通过JavaScript动态生成 -->
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" id="close-reminder-btn">关闭</button>
                    <button class="btn btn-primary" id="reminder-action-btn">处理</button>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="tab-bar-bottom">
            <div class="tab-bar-item active" data-page="home-page">
                <div class="tab-bar-icon">
                    <i class="fa fa-home"></i>
                </div>
                <div class="tab-bar-text">首页</div>
            </div>
            <div class="tab-bar-item" data-page="schedule-page">
                <div class="tab-bar-icon">
                    <i class="fa fa-calendar"></i>
                </div>
                <div class="tab-bar-text">排班表</div>
            </div>
            <div class="tab-bar-item" data-page="leave-page">
                <div class="tab-bar-icon">
                    <i class="fa fa-calendar-check-o"></i>
                </div>
                <div class="tab-bar-text">请假加班</div>
            </div>
            <div class="tab-bar-item" data-page="profile-page">
                <div class="tab-bar-icon">
                    <i class="fa fa-user"></i>
                </div>
                <div class="tab-bar-text">我的</div>
            </div>
        </div>
        
        <!-- 设置班次模态框 -->
        <div id="set-shift-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">设置班次</h3>
                    <button class="modal-close" id="close-shift-modal">×</button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">员工</div>
                        <div id="selected-employee-name" class="font-medium">张明</div>
                    </div>
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">日期</div>
                        <div id="selected-date" class="font-medium">2025年7月21日</div>
                    </div>
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">选择班次</div>
                        <div class="flex flex-wrap gap-2">
                            <div class="flex items-center p-2 border rounded-lg cursor-pointer shift-option hover:bg-blue-50 hover:border-blue-200 transition-all duration-200 flex-1 min-w-[100px] justify-center" data-shift="morning">
                                <div class="schedule-cell schedule-cell-morning">白班</div>
                            </div>
                            <div class="flex items-center p-2 border rounded-lg cursor-pointer shift-option hover:bg-indigo-50 hover:border-indigo-200 transition-all duration-200 flex-1 min-w-[100px] justify-center" data-shift="midnight1">
                                <div class="schedule-cell schedule-cell-midnight1">下半夜</div>
                            </div>
                            <div class="flex items-center p-2 border rounded-lg cursor-pointer shift-option hover:bg-purple-50 hover:border-purple-200 transition-all duration-200 flex-1 min-w-[100px] justify-center" data-shift="midnight2">
                                <div class="schedule-cell schedule-cell-midnight2">上半夜</div>
                            </div>
                            <div class="flex items-center p-2 border rounded-lg cursor-pointer shift-option hover:bg-indigo-50 hover:border-indigo-200 transition-all duration-200 flex-1 min-w-[100px] justify-center" data-shift="night">
                                <div class="schedule-cell schedule-cell-night">夜班</div>
                            </div>
                            <div class="flex items-center p-2 border rounded-lg cursor-pointer shift-option hover:bg-green-50 hover:border-green-200 transition-all duration-200 flex-1 min-w-[100px] justify-center" data-shift="trainmaster">
                                <div class="schedule-cell schedule-cell-trainmaster">调车长</div>
                            </div>
                            <div class="flex items-center p-2 border rounded-lg cursor-pointer shift-option hover:bg-orange-50 hover:border-orange-200 transition-all duration-200 flex-1 min-w-[100px] justify-center" data-shift="linkman">
                                <div class="schedule-cell schedule-cell-linkman">连结员</div>
                            </div>
                            <div class="flex items-center p-2 border rounded-lg cursor-pointer shift-option hover:bg-gray-50 hover:border-gray-200 transition-all duration-200 flex-1 min-w-[100px] justify-center" data-shift="empty">
                                <div class="schedule-cell schedule-cell-empty">清空</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 请假详情模态框 -->
        <div id="leave-detail-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">请假详情</h3>
                    <button class="modal-close" id="close-leave-modal">×</button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">申请人</div>
                        <div class="font-medium">李华</div>
                    </div>
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">申请类型</div>
                        <div class="font-medium">事假</div>
                    </div>
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">请假时间</div>
                        <div class="font-medium">2025-07-22 至 2025-07-24（3天）</div>
                    </div>
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">申请理由</div>
                        <div class="font-medium">家中有事需要处理，请假3天，期间工作已安排给王芳代理。</div>
                    </div>
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">提交时间</div>
                        <div class="font-medium">2025-07-20 14:30</div>
                    </div>
                    <div class="mb-4">
                        <div class="text-sm text-gray-medium mb-1">当前状态</div>
                        <div class="font-medium text-warning">待审批</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" id="reject-leave">拒绝</button>
                    <button class="btn btn-primary" id="approve-leave">同意</button>
                </div>
            </div>
        </div>
        
        <!-- 员工管理模态框 -->
        <div id="employee-management-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">员工管理</h3>
                    <button class="modal-close" id="close-employee-modal">×</button>
                </div>
                <div class="modal-body">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="font-medium">员工列表</h4>
                        <button id="add-employee-btn" class="btn btn-primary text-sm">添加员工</button>
                    </div>
                    <div id="employee-list" class="space-y-2">
                        <!-- 员工列表将通过JavaScript动态生成 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" id="close-employee-management">关闭</button>
                </div>
            </div>
        </div>
        
        <!-- 添加员工模态框 -->
        <div id="add-employee-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">添加员工</h3>
                    <button class="modal-close" id="close-add-employee-modal">×</button>
                </div>
                <div class="modal-body">
                    <form id="add-employee-form">
                        <div class="form-group">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" id="employee-name" placeholder="请输入姓名">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">职位</label>
                            <input type="text" class="form-control" id="employee-position" placeholder="请输入职位">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" id="cancel-add-employee">取消</button>
                    <button class="btn btn-primary" id="save-employee">保存</button>
                </div>
            </div>
        </div>
        
        <!-- 编辑员工模态框 -->
        <div id="edit-employee-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">编辑员工</h3>
                    <button class="modal-close" id="close-edit-employee-modal">×</button>
                </div>
                <div class="modal-body">
                    <form id="edit-employee-form">
                        <input type="hidden" id="edit-employee-id">
                        <div class="form-group">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" id="edit-employee-name" placeholder="请输入姓名">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">职位</label>
                            <input type="text" class="form-control" id="edit-employee-position" placeholder="请输入职位">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" id="cancel-edit-employee">取消</button>
                    <button class="btn btn-primary" id="update-employee">保存</button>
                </div>
            </div>
        </div>
        
        <!-- 编辑假期余额模态框 -->
        <div id="edit-leave-balance-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">编辑假期余额</h3>
                    <button class="modal-close" id="close-edit-leave-balance-modal">×</button>
                </div>
                <div class="modal-body">
                    <form id="edit-leave-balance-form">
                        <input type="hidden" id="edit-leave-balance-employee-id">
                        <input type="hidden" id="edit-leave-balance-type">
                        <div class="form-group">
                            <label class="form-label">员工</label>
                            <div id="edit-leave-balance-employee-name" class="font-medium"></div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">假期类型</label>
                            <div id="edit-leave-balance-type-text" class="font-medium"></div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">余额天数</label>
                            <input type="number" class="form-control" id="edit-leave-balance-value" min="0" placeholder="请输入天数">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" id="cancel-edit-leave-balance">取消</button>
                    <button class="btn btn-primary" id="save-leave-balance">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 当前日期
        const now = new Date();
        
        // 员工数据
        let employees = [
            {
                id: 1,
                name: '张明',
                avatar: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/0e5ed30a8f6e4bdab67a4f8e92f566fc~tplv-a9rns2rl98-image.image?rcl=2025110623470214AF7F8D0FA5664DAC4D&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765036058&x-signature=U2PhW682QzoUXkneBqG%2BPMDxncM%3D',
                department: '管理层',
                position: '部门经理',
                leaveBalance: {
                    annual: 5,
                    marriage: 3,
                    family: 0,
                    maternity: 10
                }
            },
            {
                id: 2,
                name: '李华',
                avatar: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/a389d06106374080990448c5ce155e65~tplv-a9rns2rl98-image.image?rcl=2025110623470214AF7F8D0FA5664DAC4D&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765036057&x-signature=Rexc8lMfFMgSgwXv1AW6ff7LEJ0%3D',
                department: '技术部',
                position: '开发工程师',
                leaveBalance: {
                    annual: 10,
                    marriage: 0,
                    family: 5,
                    maternity: 0
                }
            },
            {
                id: 3,
                name: '王芳',
                avatar: 'https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/831e8f9a4c554f3a8b36f77f1de265b0~tplv-a9rns2rl98-image.image?rcl=2025110623470214AF7F8D0FA5664DAC4D&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765036057&x-signature=e9WYk5vnMB3fw%2BuWH1s8PS7%2BU64%3D',
                department: '人事部',
                position: '人事专员',
                leaveBalance: {
                    annual: 8,
                    marriage: 0,
                    family: 0,
                    maternity: 15
                }
            },
            {
                id: 4,
                name: '赵强',
                avatar: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/0e5ed30a8f6e4bdab67a4f8e92f566fc~tplv-a9rns2rl98-image.image?rcl=2025110623470214AF7F8D0FA5664DAC4D&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765036058&x-signature=U2PhW682QzoUXkneBqG%2BPMDxncM%3D',
                department: '销售部',
                position: '销售经理',
                leaveBalance: {
                    annual: 12,
                    marriage: 0,
                    family: 10,
                    maternity: 0
                }
            }
        ];
        
        // 班次数据 - 仅保留需要的几类
        const shiftTypes = [
            {
                id: 'morning',
                name: '白班',
                startTime: '09:00',
                endTime: '18:00',
                class: 'schedule-cell-morning'
            },
            {
                id: 'midnight1',
                name: '下半夜',
                startTime: '00:00',
                endTime: '08:00',
                class: 'schedule-cell-midnight1'
            },
            {
                id: 'midnight2',
                name: '上半夜',
                startTime: '20:00',
                endTime: '04:00',
                class: 'schedule-cell-midnight2'
            },
            {
                id: 'night',
                name: '夜班',
                startTime: '16:00',
                endTime: '00:00',
                class: 'schedule-cell-night'
            },
            {
                id: 'trainmaster',
                name: '调车长',
                startTime: '08:00',
                endTime: '16:00',
                class: 'schedule-cell-trainmaster'
            },
            {
                id: 'linkman',
                name: '连结员',
                startTime: '16:00',
                endTime: '24:00',
                class: 'schedule-cell-linkman'
            }
        ];
        
        // 请假数据
        let leaveApplications = [
            {
                id: 1,
                employeeId: 2,
                name: '李华',
                type: 'personal',
                typeText: '事假',
                startDate: '2025-07-22',
                endDate: '2025-07-24',
                days: 3,
                reason: '家中有事需要处理，请假3天，期间工作已安排给王芳代理。',
                submitTime: '2025-07-20 14:30',
                status: 'pending',
                statusText: '待审批'
            },
            {
                id: 2,
                employeeId: 3,
                name: '王芳',
                type: 'sick',
                typeText: '病假',
                startDate: '2025-07-18',
                endDate: '2025-07-18',
                days: 1,
                reason: '感冒发烧，需要休息一天，已安排好工作交接。',
                submitTime: '2025-07-17 09:15',
                status: 'approved',
                statusText: '已同意'
            },
            {
                id: 3,
                employeeId: 4,
                name: '赵强',
                type: 'annual',
                typeText: '年假',
                startDate: '2025-07-25',
                endDate: '2025-07-31',
                days: 7,
                reason: '计划休年假，外出旅游，期间紧急事务可联系张明。',
                submitTime: '2025-07-15 16:40',
                status: 'approved',
                statusText: '已同意'
            },
            {
                id: 4,
                employeeId: 2,
                name: '李华',
                type: 'overtime',
                typeText: '加班',
                startDate: '2025-07-19',
                endDate: '2025-07-19',
                days: 1,
                reason: '项目上线前需要加班完成测试工作。',
                submitTime: '2025-07-18 17:20',
                status: 'rejected',
                statusText: '已拒绝'
            }
        ];
        
        // 排班数据
        let scheduleData = {};
        
        // 生成排班表
        function generateScheduleTable(year, month) {
            // 更新月份标题
            document.getElementById('current-month').textContent = `${year}年${month + 1}月`;
            
            // 获取当月第一天
            const firstDay = new Date(year, month, 1);
            // 获取当月最后一天
            const lastDay = new Date(year, month + 1, 0);
            
            // 获取当月天数
            const daysInMonth = lastDay.getDate();
            
            // 生成表头（日期）
            const headerEl = document.getElementById('schedule-header');
            headerEl.innerHTML = '<th class="sticky left-0 z-20">员工</th>';
            
            for (let i = 1; i <= daysInMonth; i++) {
                const date = new Date(year, month, i);
                const dayOfWeek = date.getDay();
                const weekdayText = ['日', '一', '二', '三', '四', '五', '六'][dayOfWeek];
                
                const th = document.createElement('th');
                th.innerHTML = `
                    <div>${i}</div>
                    <div class="text-xs text-gray-medium">${weekdayText}</div>
                `;
                
                // 周末高亮显示
                if (dayOfWeek === 0 || dayOfWeek === 6) {
                    th.classList.add('bg-gray-50');
                }
                
                headerEl.appendChild(th);
            }
            
            // 生成表格内容（员工和排班）
            const bodyEl = document.getElementById('schedule-body');
            bodyEl.innerHTML = '';
            
            // 初始化当月排班数据
            if (!scheduleData[year]) scheduleData[year] = {};
            if (!scheduleData[year][month]) scheduleData[year][month] = {};
            
            const monthSchedule = scheduleData[year][month];
            
            // 为每位员工生成一行
            employees.forEach(employee => {
                const tr = document.createElement('tr');
                
                // 员工信息单元格
                const employeeTd = document.createElement('td');
                employeeTd.innerHTML = `
                    <div class="employee-info">
                        
                        <span class="employee-name">${employee.name}</span>
                    </div>
                `;
                tr.appendChild(employeeTd);
                
                // 为每天生成一个单元格
                for (let i = 1; i <= daysInMonth; i++) {
                    const date = new Date(year, month, i);
                    const dayOfWeek = date.getDay();
                    
                    const td = document.createElement('td');
                    td.dataset.employeeId = employee.id;
                    td.dataset.date = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
                    
                    // 获取该员工当天的排班
                    const employeeSchedule = monthSchedule[employee.id] || {};
                    const shift = employeeSchedule[i] || 'empty';
                    
                    // 设置单元格内容和样式
                    let shiftText = '';
                    let shiftClass = '';
                    
                    // 检查是否有请假记录
                    const leaveRecord = leaveApplications.find(leave => 
                        leave.employeeId === employee.id && 
                        leave.status === 'approved' && 
                        new Date(leave.startDate) <= date && 
                        new Date(leave.endDate) >= date
                    );
                    
                    if (leaveRecord) {
                        shiftText = '请假';
                        shiftClass = 'schedule-cell-leave';
                    } else {
                        const shiftType = shiftTypes.find(type => type.id === shift);
                        if (shiftType) {
                            shiftText = shiftType.name;
                            shiftClass = shiftType.class;
                        } else {
                            shiftText = '';
                            shiftClass = 'schedule-cell-empty';
                        }
                    }
                    
                    td.innerHTML = `<div class="schedule-cell ${shiftClass}">${shiftText}</div>`;
                    
                    // 周末高亮显示
                    if (dayOfWeek === 0 || dayOfWeek === 6) {
                        td.classList.add('bg-gray-50');
                    }
                    
                    // 添加点击事件
                    td.addEventListener('click', () => {
                        openSetShiftModal(employee, date, shift);
                    });
                    
                    tr.appendChild(td);
                }
                
                bodyEl.appendChild(tr);
            });
        }
        
        // 初始化排班表
        let currentYear = now.getFullYear();
        let currentMonth = now.getMonth();
        generateScheduleTable(currentYear, currentMonth);
        
        // 上个月按钮
        document.getElementById('prev-month').addEventListener('click', () => {
            currentMonth--;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            }
            generateScheduleTable(currentYear, currentMonth);
        });
        
        // 下个月按钮
        document.getElementById('next-month').addEventListener('click', () => {
            currentMonth++;
            if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            generateScheduleTable(currentYear, currentMonth);
        });
        
        // 生成今日排班详情
        function generateTodaySchedule() {
            const todayScheduleEl = document.getElementById('today-schedule');
            
            // 获取今天的日期
            const today = new Date();
            const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
            
            // 查找今天的排班
            const todaySchedule = [];
            
            employees.forEach(employee => {
                const yearSchedule = scheduleData[today.getFullYear()] || {};
                const monthSchedule = yearSchedule[today.getMonth()] || {};
                const employeeSchedule = monthSchedule[employee.id] || {};
                const shift = employeeSchedule[today.getDate()] || 'empty';
                
                // 检查是否有请假记录
                const leaveRecord = leaveApplications.find(leave => 
                    leave.employeeId === employee.id && 
                    leave.status === 'approved' && 
                    new Date(leave.startDate) <= today && 
                    new Date(leave.endDate) >= today
                );
                
                let shiftText = '';
                let shiftClass = '';
                
                if (leaveRecord) {
                    shiftText = '请假';
                    shiftClass = 'schedule-cell-leave';
                } else {
                    const shiftType = shiftTypes.find(type => type.id === shift);
                    if (shiftType) {
                        shiftText = shiftType.name;
                        shiftClass = shiftType.class;
                    } else {
                        shiftText = '未排班';
                        shiftClass = 'schedule-cell-empty';
                    }
                }
                
                todaySchedule.push({
                    employee,
                    shiftText,
                    shiftClass
                });
            });
            
            // 清空容器
            todayScheduleEl.innerHTML = '';
            
            // 添加排班项
            todaySchedule.forEach(schedule => {
                const scheduleEl = document.createElement('div');
                scheduleEl.className = 'shift-item';
                scheduleEl.innerHTML = `
                    <div class="shift-info">
                        
                        <div>
                            <div class="shift-name">${schedule.employee.name}</div>
                            <div class="shift-time">${schedule.employee.department} | ${schedule.employee.position}</div>
                        </div>
                    </div>
                    <div class="schedule-cell ${schedule.shiftClass}">${schedule.shiftText}</div>
                `;
                
                todayScheduleEl.appendChild(scheduleEl);
            });
        }
        
        // 生成请假列表
        function generateLeaveList() {
            const leaveListEl = document.getElementById('leave-list-container');
            
            // 清空容器
            leaveListEl.innerHTML = '';
            
            // 添加请假项
            leaveApplications.forEach(leave => {
                const leaveEl = document.createElement('div');
                leaveEl.className = 'leave-item';
                leaveEl.innerHTML = `
                    <div class="leave-header">
                        <span class="leave-name">${leave.name}</span>
                        <span class="leave-type leave-type-${leave.type}">${leave.typeText}</span>
                    </div>
                    <div class="leave-dates">${leave.startDate} - ${leave.endDate}（${leave.days}天）</div>
                    <div class="leave-reason">${leave.reason}</div>
                    <div class="leave-footer">
                        <span>提交时间：${leave.submitTime}</span>
                        <span class="leave-status leave-status-${leave.status}">${leave.statusText}</span>
                    </div>
                `;
                
                // 添加点击事件，打开详情模态框
                if (leave.status === 'pending') {
                    leaveEl.style.cursor = 'pointer';
                    leaveEl.addEventListener('click', () => {
                        openLeaveDetailModal(leave);
                    });
                }
                
                leaveListEl.appendChild(leaveEl);
            });
        }
        
        // 生成员工假期余额列表
        function generateLeaveBalanceList() {
            const tableBody = document.getElementById('leave-balance-table');
            tableBody.innerHTML = '';
            
            employees.forEach(employee => {
                const tr = document.createElement('tr');
                tr.className = 'border-b';
                tr.innerHTML = `
                    <td class="py-3 px-4">
                        <div class="flex items-center">
                            
                            <span>${employee.name}</span>
                        </div>
                    </td>
                    <td class="py-3 px-4 text-center cursor-pointer hover:bg-blue-50 transition-colors duration-200 leave-balance-cell" 
                        data-employee-id="${employee.id}" data-leave-type="annual">
                        ${employee.leaveBalance?.annual || 0}天
                    </td>
                    <td class="py-3 px-4 text-center cursor-pointer hover:bg-blue-50 transition-colors duration-200 leave-balance-cell" 
                        data-employee-id="${employee.id}" data-leave-type="marriage">
                        ${employee.leaveBalance?.marriage || 0}天
                    </td>
                    <td class="py-3 px-4 text-center cursor-pointer hover:bg-blue-50 transition-colors duration-200 leave-balance-cell" 
                        data-employee-id="${employee.id}" data-leave-type="family">
                        ${employee.leaveBalance?.family || 0}天
                    </td>
                    <td class="py-3 px-4 text-center cursor-pointer hover:bg-blue-50 transition-colors duration-200 leave-balance-cell" 
                        data-employee-id="${employee.id}" data-leave-type="maternity">
                        ${employee.leaveBalance?.maternity || 0}天
                    </td>
                `;
                tableBody.appendChild(tr);
            });
            
            // 添加点击事件
            document.querySelectorAll('.leave-balance-cell').forEach(cell => {
                cell.addEventListener('click', () => {
                    const employeeId = parseInt(cell.dataset.employeeId);
                    const leaveType = cell.dataset.leaveType;
                    const currentValue = parseInt(cell.textContent);
                    
                    openEditLeaveBalanceModal(employeeId, leaveType, currentValue);
                });
            });
        }
        
        // 初始化考勤图表
        function initAttendanceChart() {
            const ctx = document.getElementById('attendance-chart').getContext('2d');
            
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['出勤', '请假', '迟到', '早退', '缺勤'],
                    datasets: [{
                        label: '考勤统计',
                        data: [22, 3, 2, 1, 0],
                        backgroundColor: [
                            '#10B981', // 绿色 - 出勤
                            '#3B82F6', // 蓝色 - 请假
                            '#F59E0B', // 黄色 - 迟到
                            '#F97316', // 橙色 - 早退
                            '#EF4444'  // 红色 - 缺勤
                        ],
                        borderWidth: 0,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        }
        
        // 打开设置班次模态框
        function openSetShiftModal(employee, date, currentShift) {
            const modal = document.getElementById('set-shift-modal');
            const employeeNameEl = document.getElementById('selected-employee-name');
            const dateEl = document.getElementById('selected-date');
            
            // 设置员工姓名和日期
            employeeNameEl.textContent = employee.name;
            const dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
            dateEl.textContent = dateStr;
            
            // 存储当前选择的员工和日期
            modal.dataset.employeeId = employee.id;
            modal.dataset.date = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
            
            // 高亮当前班次
            const shiftOptions = document.querySelectorAll('.shift-option');
            shiftOptions.forEach(option => {
                if (option.dataset.shift === currentShift) {
                    option.classList.add('bg-blue-50', 'border-primary');
                } else {
                    option.classList.remove('bg-blue-50', 'border-primary');
                }
            });
            
            // 显示模态框
            modal.classList.add('active');
        }
        
        // 关闭设置班次模态框
        document.getElementById('close-shift-modal').addEventListener('click', () => {
            document.getElementById('set-shift-modal').classList.remove('active');
        });
        
        // 选择班次
        const shiftOptions = document.querySelectorAll('.shift-option');
        shiftOptions.forEach(option => {
            option.addEventListener('click', () => {
                const modal = document.getElementById('set-shift-modal');
                const employeeId = parseInt(modal.dataset.employeeId);
                const dateStr = modal.dataset.date;
                const shift = option.dataset.shift;
                
                // 解析日期
                const [year, month, day] = dateStr.split('-').map(Number);
                
                // 更新排班数据
                if (!scheduleData[year]) scheduleData[year] = {};
                if (!scheduleData[year][month - 1]) scheduleData[year][month - 1] = {};
                if (!scheduleData[year][month - 1][employeeId]) scheduleData[year][month - 1][employeeId] = {};
                
                scheduleData[year][month - 1][employeeId][day] = shift;
                
                // 更新排班表
                generateScheduleTable(currentYear, currentMonth);
                
                // 关闭模态框
                modal.classList.remove('active');
            });
        });
        
        // 打开请假详情模态框
        function openLeaveDetailModal(leave) {
            const modal = document.getElementById('leave-detail-modal');
            
            // 设置请假详情
            modal.dataset.leaveId = leave.id;
            
            // 显示模态框
            modal.classList.add('active');
        }
        
        // 关闭请假详情模态框
        document.getElementById('close-leave-modal').addEventListener('click', () => {
            document.getElementById('leave-detail-modal').classList.remove('active');
        });
        
        // 拒绝请假
        document.getElementById('reject-leave').addEventListener('click', () => {
            const modal = document.getElementById('leave-detail-modal');
            const leaveId = parseInt(modal.dataset.leaveId);
            
            // 更新请假状态
            const leaveIndex = leaveApplications.findIndex(leave => leave.id === leaveId);
            if (leaveIndex !== -1) {
                leaveApplications[leaveIndex].status = 'rejected';
                leaveApplications[leaveIndex].statusText = '已拒绝';
            }
            
            // 关闭模态框
            modal.classList.remove('active');
            
            // 显示提示
            alert('已拒绝请假申请');
            
            // 更新请假列表和排班表
            generateLeaveList();
            generateScheduleTable(currentYear, currentMonth);
            
            // 更新待办事项
            initTodos();
            
            // 检查是否还有其他未审核的请假申请
            const pendingLeaves = leaveApplications.filter(leave => leave.status === 'pending');
            if (pendingLeaves.length === 0) {
                // 关闭所有提醒模态框
                document.getElementById('reminder-modal').classList.remove('active');
            }
        });
        
        // 同意请假
        document.getElementById('approve-leave').addEventListener('click', () => {
            const modal = document.getElementById('leave-detail-modal');
            const leaveId = parseInt(modal.dataset.leaveId);
            
            // 更新请假状态
            const leaveIndex = leaveApplications.findIndex(leave => leave.id === leaveId);
            if (leaveIndex !== -1) {
                leaveApplications[leaveIndex].status = 'approved';
                leaveApplications[leaveIndex].statusText = '已同意';
                
                // 扣除假期天数
                const leave = leaveApplications[leaveIndex];
                const employeeIndex = employees.findIndex(emp => emp.id === leave.employeeId);
                if (employeeIndex !== -1 && leave.type === 'annual') {
                    employees[employeeIndex].leaveBalance.annual -= leave.days;
                    if (employees[employeeIndex].leaveBalance.annual < 0) {
                        employees[employeeIndex].leaveBalance.annual = 0;
                    }
                }
            }
            
            // 关闭模态框
            modal.classList.remove('active');
            
            // 显示提示
            alert('已同意请假申请');
            
            // 更新请假列表和排班表
            generateLeaveList();
            generateScheduleTable(currentYear, currentMonth);
            generateLeaveBalanceList();
            
            // 更新待办事项
            initTodos();
            
            // 检查是否还有其他未审核的请假申请
            const pendingLeaves = leaveApplications.filter(leave => leave.status === 'pending');
            if (pendingLeaves.length === 0) {
                // 关闭所有提醒模态框
                document.getElementById('reminder-modal').classList.remove('active');
            }
        });
        
        // 员工管理模态框
        const employeeManagementBtn = document.getElementById('employee-management-btn');
        const employeeManagementModal = document.getElementById('employee-management-modal');
        const closeEmployeeModal = document.getElementById('close-employee-modal');
        const closeEmployeeManagement = document.getElementById('close-employee-management');
        const employeeList = document.getElementById('employee-list');
        
        // 打开员工管理模态框
        employeeManagementBtn.addEventListener('click', () => {
            renderEmployeeList();
            employeeManagementModal.classList.add('active');
        });
        
        // 关闭员工管理模态框
        closeEmployeeModal.addEventListener('click', () => {
            employeeManagementModal.classList.remove('active');
        });
        
        closeEmployeeManagement.addEventListener('click', () => {
            employeeManagementModal.classList.remove('active');
        });
        
        // 渲染员工列表
        function renderEmployeeList() {
            employeeList.innerHTML = '';
            
            employees.forEach(employee => {
                const employeeEl = document.createElement('div');
                employeeEl.className = 'flex justify-between items-center p-4 border rounded-lg';
                employeeEl.innerHTML = `
                    <div class="flex items-center" data-employee-id="${employee.id}">
                        
                        <div>
                            <div class="employee-name">${employee.name}</div>
                            <div class="text-xs text-gray-medium">${employee.position}</div>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-primary edit-employee-btn" data-employee-id="${employee.id}">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button class="text-danger delete-employee-btn" data-employee-id="${employee.id}">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                `;
                employeeList.appendChild(employeeEl);
            });
            
            // 添加删除员工事件
            const deleteButtons = document.querySelectorAll('.delete-employee-btn');
            deleteButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const employeeId = parseInt(button.dataset.employeeId);
                    deleteEmployee(employeeId);
                });
            });
            
            // 添加编辑员工事件
            const editButtons = document.querySelectorAll('.edit-employee-btn');
            editButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const employeeId = parseInt(button.dataset.employeeId);
                    openEditEmployeeModal(employeeId);
                });
            });
            
            // 添加点击员工项事件
            const employeeItems = document.querySelectorAll('.flex.items-center[data-employee-id]');
            employeeItems.forEach(item => {
                item.addEventListener('click', () => {
                    const employeeId = parseInt(item.dataset.employeeId);
                    openEditEmployeeModal(employeeId);
                });
            });
        }
        
        // 删除员工
        function deleteEmployee(employeeId) {
            if (confirm('确定要删除此员工吗？')) {
                // 从员工列表中删除
                employees = employees.filter(employee => employee.id !== employeeId);
                
                // 更新员工列表
                renderEmployeeList();
                
                // 更新排班表
                generateScheduleTable(currentYear, currentMonth);
                
                // 更新员工选择下拉框
                updateEmployeeSelect();
                
                // 更新请假列表
                leaveApplications = leaveApplications.filter(leave => leave.employeeId !== employeeId);
                generateLeaveList();
                
                // 更新假期余额列表
                generateLeaveBalanceList();
                
                // 关闭员工管理模态框
                employeeManagementModal.classList.remove('active');
                
                // 显示成功提示
                alert('员工删除成功');
            }
        }
        
        // 添加员工模态框
        const addEmployeeBtn = document.getElementById('add-employee-btn');
        const addEmployeeModal = document.getElementById('add-employee-modal');
        const closeAddEmployeeModal = document.getElementById('close-add-employee-modal');
        const cancelAddEmployee = document.getElementById('cancel-add-employee');
        const saveEmployee = document.getElementById('save-employee');
        const addEmployeeForm = document.getElementById('add-employee-form');
        
        // 打开添加员工模态框
        addEmployeeBtn.addEventListener('click', () => {
            addEmployeeModal.classList.add('active');
        });
        
        // 关闭添加员工模态框
        closeAddEmployeeModal.addEventListener('click', () => {
            addEmployeeModal.classList.remove('active');
        });
        
        cancelAddEmployee.addEventListener('click', () => {
            addEmployeeModal.classList.remove('active');
        });
        
        // 保存员工
        saveEmployee.addEventListener('click', () => {
            const name = document.getElementById('employee-name').value;
            const position = document.getElementById('employee-position').value;
            
            if (!name || !position) {
                alert('请填写完整信息');
                return;
            }
            
            // 创建新员工
            const newEmployee = {
                id: employees.length > 0 ? Math.max(...employees.map(e => e.id)) + 1 : 1,
                name,
                avatar: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/0e5ed30a8f6e4bdab67a4f8e92f566fc~tplv-a9rns2rl98-image.image?rcl=2025110623470214AF7F8D0FA5664DAC4D&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765036058&x-signature=U2PhW682QzoUXkneBqG%2BPMDxncM%3D',
                position,
                leaveBalance: {
                    annual: 10,
                    marriage: 3,
                    family: 5,
                    maternity: 15
                }
            };
            
            // 添加到员工列表
            employees.push(newEmployee);
            
            // 更新员工列表
            renderEmployeeList();
            
            // 更新排班表
            generateScheduleTable(currentYear, currentMonth);
            
            // 更新员工选择下拉框
            updateEmployeeSelect();
            
            // 更新假期余额列表
            generateLeaveBalanceList();
            
            // 重置表单
            addEmployeeForm.reset();
            
            // 关闭模态框
            addEmployeeModal.classList.remove('active');
            
            // 显示成功提示
            alert('员工添加成功');
        });
        
        // 编辑员工模态框
        const editEmployeeModal = document.getElementById('edit-employee-modal');
        const closeEditEmployeeModal = document.getElementById('close-edit-employee-modal');
        const cancelEditEmployee = document.getElementById('cancel-edit-employee');
        const updateEmployee = document.getElementById('update-employee');
        
        // 打开编辑员工模态框
        function openEditEmployeeModal(employeeId) {
            const employee = employees.find(emp => emp.id === employeeId);
            if (!employee) return;
            
            // 填充表单数据
            document.getElementById('edit-employee-id').value = employee.id;
            document.getElementById('edit-employee-name').value = employee.name;
            document.getElementById('edit-employee-position').value = employee.position;
            
            // 显示模态框
            editEmployeeModal.classList.add('active');
        }
        
        // 关闭编辑员工模态框
        closeEditEmployeeModal.addEventListener('click', () => {
            editEmployeeModal.classList.remove('active');
        });
        
        cancelEditEmployee.addEventListener('click', () => {
            editEmployeeModal.classList.remove('active');
        });
        
        // 更新员工
        updateEmployee.addEventListener('click', () => {
            const employeeId = parseInt(document.getElementById('edit-employee-id').value);
            const name = document.getElementById('edit-employee-name').value;
            const position = document.getElementById('edit-employee-position').value;
            
            if (!name || !position) {
                alert('请填写完整信息');
                return;
            }
            
            // 更新员工信息
            const employeeIndex = employees.findIndex(emp => emp.id === employeeId);
            if (employeeIndex !== -1) {
                employees[employeeIndex].name = name;
                employees[employeeIndex].position = position;
            }
            
            // 更新员工列表
            renderEmployeeList();
            
            // 更新排班表
            generateScheduleTable(currentYear, currentMonth);
            
            // 更新员工选择下拉框
            updateEmployeeSelect();
            
            // 更新请假列表
            leaveApplications.forEach(leave => {
                if (leave.employeeId === employeeId) {
                    leave.name = name;
                }
            });
            generateLeaveList();
            
            // 更新假期余额列表
            generateLeaveBalanceList();
            
            // 关闭模态框
            editEmployeeModal.classList.remove('active');
            
            // 显示成功提示
            alert('员工信息更新成功');
        });
        
        // 更新员工选择下拉框
        function updateEmployeeSelect() {
            const select = document.getElementById('employee-select');
            
            // 保存当前选中值
            const currentValue = select.value;
            
            // 清空选项
            select.innerHTML = '<option value="">请选择</option>';
            
            // 添加员工选项
            employees.forEach(employee => {
                const option = document.createElement('option');
                option.value = employee.id;
                option.textContent = employee.name;
                select.appendChild(option);
            });
            
            // 恢复选中值
            if (currentValue) {
                select.value = currentValue;
            }
        }
        
        // 员工选择下拉框事件
        document.getElementById('employee-select').addEventListener('change', function() {
            const employeeId = parseInt(this.value);
            updateLeaveBalanceDisplay(employeeId);
        });
        
        // 更新假期余额显示
        function updateLeaveBalanceDisplay(employeeId) {
            const leaveType = document.getElementById('leave-type').value;
            const leaveBalanceEl = document.getElementById('leave-balance');
            
            if (!employeeId || !leaveType) {
                leaveBalanceEl.textContent = '0';
                return;
            }
            
            const employee = employees.find(emp => emp.id === employeeId);
            if (employee && employee.leaveBalance && employee.leaveBalance[leaveType]) {
                leaveBalanceEl.textContent = employee.leaveBalance[leaveType];
            } else {
                leaveBalanceEl.textContent = '0';
            }
        }
        
        // 请假类型下拉框事件
        document.getElementById('leave-type').addEventListener('change', function() {
            const employeeId = parseInt(document.getElementById('employee-select').value);
            updateLeaveBalanceDisplay(employeeId);
        });
        
        // 请假表单提交
        const leaveForm = document.getElementById('leave-form');
        
        if (leaveForm) {
            leaveForm.addEventListener('submit', (e) => {
                e.preventDefault();
                
                const employeeSelect = document.getElementById('employee-select');
                const leaveTypeSelect = document.getElementById('leave-type');
                const startDateInput = document.getElementById('start-date');
                const endDateInput = document.getElementById('end-date');
                const leaveReasonInput = document.getElementById('leave-reason');
                
                if (!employeeSelect || !leaveTypeSelect || !startDateInput || !endDateInput || !leaveReasonInput) {
                    alert('表单元素缺失，请刷新页面重试');
                    return;
                }
                
                const employeeId = parseInt(employeeSelect.value);
                const leaveType = leaveTypeSelect.value;
                const startDate = startDateInput.value;
                const endDate = endDateInput.value;
                const leaveReason = leaveReasonInput.value;
                
                if (!employeeId || employeeId === 0) {
                    alert('请选择申请人');
                    employeeSelect.focus();
                    return;
                }
                
                if (!leaveType) {
                    alert('请选择申请类型');
                    leaveTypeSelect.focus();
                    return;
                }
                
                if (!startDate) {
                    alert('请选择开始日期');
                    startDateInput.focus();
                    return;
                }
                
                if (!endDate) {
                    alert('请选择结束日期');
                    endDateInput.focus();
                    return;
                }
                
                if (!leaveReason || leaveReason.trim() === '') {
                    alert('请填写申请理由');
                    leaveReasonInput.focus();
                    return;
                }
                
                // 检查开始日期是否早于结束日期
                const start = new Date(startDate);
                const end = new Date(endDate);
                if (start > end) {
                    alert('开始日期不能晚于结束日期');
                    return;
                }
                
                // 计算请假天数
                const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
                
                // 检查假期余额
                const employee = employees.find(emp => emp.id === employeeId);
                if (employee && employee.leaveBalance && employee.leaveBalance[leaveType] !== undefined) {
                    if (employee.leaveBalance[leaveType] < days && leaveType !== 'other') {
                        alert(`假期余额不足，当前剩余${employee.leaveBalance[leaveType]}天`);
                        return;
                    }
                }
                
                // 创建新请假申请
                const newLeave = {
                    id: leaveApplications.length > 0 ? Math.max(...leaveApplications.map(l => l.id)) + 1 : 1,
                    employeeId,
                    name: employees.find(emp => emp.id === employeeId)?.name || '',
                    type: leaveType,
                    typeText: leaveTypeSelect.options[leaveTypeSelect.selectedIndex].text,
                    startDate,
                    endDate,
                    days,
                    reason: leaveReason,
                    submitTime: `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
                    status: 'pending',
                    statusText: '待审批'
                };
                
                // 添加到请假列表
                leaveApplications.push(newLeave);
                
                // 显示成功提示
                alert('申请提交成功，请等待审批');
                
                // 重置表单
                leaveForm.reset();
                
                // 切换到请假列表
                document.querySelector('.tab-item[data-tab="leave-list"]').click();
                
                // 更新请假列表
                generateLeaveList();
                
                // 更新待办事项
                initTodos();
                
                // 显示请假提醒
                checkReminders();
            });
        } else {
            console.error('未找到请假表单元素');
        }
        
        // 初始化页面数据
        document.addEventListener('DOMContentLoaded', () => {
            // 设置当前日期
            document.getElementById('current-date').textContent = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${['日', '一', '二', '三', '四', '五', '六'][now.getDay()]}`;
            
            // 生成今日排班详情
            generateTodaySchedule();
            
            // 生成请假列表
            generateLeaveList();
            
            // 生成员工假期余额列表
            generateLeaveBalanceList();
            
            // 初始化考勤图表
            initAttendanceChart();
            
            // 更新员工选择下拉框
            updateEmployeeSelect();
            
            // 检查是否需要显示提醒
            checkReminders();
            
            // 初始化待办事项
            initTodos();
        });
        
        // 检查提醒
        function checkReminders() {
            // 检查是否有未审核的请假申请
            const pendingLeaves = leaveApplications.filter(leave => leave.status === 'pending');
            if (pendingLeaves.length > 0) {
                showLeaveReminder(pendingLeaves);
            }
            
            // 检查是否需要显示发布排班表提醒（周六）
            const dayOfWeek = now.getDay(); // 0-6, 0是周日
            if (dayOfWeek === 6) { // 周六
                // 检查本地存储，避免重复提醒
                const lastReminderDate = localStorage.getItem('scheduleReminderDate');
                const todayDate = now.toISOString().split('T')[0];
                
                if (lastReminderDate !== todayDate) {
                    showScheduleReminder();
                    localStorage.setItem('scheduleReminderDate', todayDate);
                }
            } else if (dayOfWeek === 0 || dayOfWeek === 1) { // 周日或周一
                // 周一自动隐藏排班表提醒
                localStorage.removeItem('scheduleReminderDate');
            }
        }
        
        // 显示请假提醒
        function showLeaveReminder(pendingLeaves) {
            const modal = document.getElementById('reminder-modal');
            const title = document.getElementById('reminder-title');
            const content = document.getElementById('reminder-content');
            const actionBtn = document.getElementById('reminder-action-btn');
            
            title.textContent = '请假申请提醒';
            
            let contentHTML = `<p class="mb-4">您有 ${pendingLeaves.length} 个未审核的请假申请：</p><ul class="space-y-2">`;
            pendingLeaves.forEach(leave => {
                contentHTML += `
                    <li class="flex justify-between items-center p-2 bg-light rounded">
                        <div>
                            <div class="font-medium">${leave.name} - ${leave.typeText}</div>
                            <div class="text-xs text-gray-medium">${leave.startDate} 至 ${leave.endDate}</div>
                        </div>
                    </li>
                `;
            });
            contentHTML += '</ul>';
            
            content.innerHTML = contentHTML;
            
            // 设置按钮点击事件
            actionBtn.onclick = () => {
                modal.classList.remove('active');
                // 切换到请假页面
                document.querySelector('.tab-bar-item[data-page="leave-page"]').click();
                // 切换到请假列表标签
                document.querySelector('.tab-item[data-tab="leave-list"]').click();
            };
            
            // 显示模态框
            modal.classList.add('active');
        }
        
        // 显示发布排班表提醒
        function showScheduleReminder() {
            const modal = document.getElementById('reminder-modal');
            const title = document.getElementById('reminder-title');
            const content = document.getElementById('reminder-content');
            const actionBtn = document.getElementById('reminder-action-btn');
            
            title.textContent = '排班提醒';
            content.innerHTML = `
                <div class="flex flex-col items-center p-4">
                    <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center text-white mb-4">
                        <i class="fa fa-calendar-plus-o text-2xl"></i>
                    </div>
                    <p class="text-center mb-4">今天是周六，请记得发布下周的排班表哦！</p>
                    <div class="text-sm text-gray-medium">发布后员工将收到通知</div>
                </div>
            `;
            
            // 设置按钮点击事件
            actionBtn.onclick = () => {
                modal.classList.remove('active');
                // 切换到排班表页面
                document.querySelector('.tab-bar-item[data-page="schedule-page"]').click();
            };
            
            // 显示模态框
            modal.classList.add('active');
        }
        
        // 初始化待办事项 - 已彻底移除"提交本月考勤报表"项
        function initTodos() {
            const todosContainer = document.querySelector('.card-body ul');
            const dayOfWeek = now.getDay(); // 0-6, 0是周日
            
            // 清空现有待办事项
            todosContainer.innerHTML = '';
            
            // 添加待办事项
            const todos = [];
            
            // 检查是否有未审核的请假申请
            const pendingLeaves = leaveApplications.filter(leave => leave.status === 'pending');
            if (pendingLeaves.length > 0) {
                todos.push({
                    text: `审批 ${pendingLeaves.length} 个请假申请`,
                    color: 'bg-warning',
                    time: '今天'
                });
            }
            
            // 周六添加发布排班表待办事项
            if (dayOfWeek === 6) { // 周六
                todos.push({
                    text: '发布下周排班表',
                    color: 'bg-primary',
                    time: '今天'
                });
            }
            
            // 渲染待办事项
            todos.forEach(todo => {
                const li = document.createElement('li');
                li.className = 'flex items-center';
                li.innerHTML = `
                    <div class="w-2 h-2 rounded-full ${todo.color} mr-3"></div>
                    <span>${todo.text}</span>
                    <span class="ml-auto text-xs text-gray-medium">${todo.time}</span>
                `;
                todosContainer.appendChild(li);
            });
        }
        
        // 底部导航切换
        document.querySelectorAll('.tab-bar-item').forEach(item => {
            item.addEventListener('click', () => {
                const pageId = item.dataset.page;
                
                // 更新导航项状态
                document.querySelectorAll('.tab-bar-item').forEach(navItem => {
                    navItem.classList.remove('active');
                });
                item.classList.add('active');
                
                // 更新页面显示
                document.querySelectorAll('.wx-page').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(pageId).classList.add('active');
            });
        });
        
        // 标签页切换
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', () => {
                const tabId = item.dataset.tab;
                
                // 更新标签项状态
                document.querySelectorAll('.tab-item').forEach(tabItem => {
                    tabItem.classList.remove('active');
                });
                item.classList.add('active');
                
                // 更新内容显示
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                document.getElementById(tabId).classList.add('active');
                
                // 如果切换到假期余额标签，刷新数据
                if (tabId === 'leave-balance-tab') {
                    generateLeaveBalanceList();
                }
                
                // 如果切换到请假申请标签，更新员工选择下拉框
                if (tabId === 'leave-apply') {
                    updateEmployeeSelect();
                }
            });
        });
        
        // 编辑假期余额模态框
        const editLeaveBalanceModal = document.getElementById('edit-leave-balance-modal');
        const closeEditLeaveBalanceModal = document.getElementById('close-edit-leave-balance-modal');
        const cancelEditLeaveBalance = document.getElementById('cancel-edit-leave-balance');
        const saveLeaveBalance = document.getElementById('save-leave-balance');
        
        // 打开编辑假期余额模态框
        function openEditLeaveBalanceModal(employeeId, leaveType, currentValue) {
            const employee = employees.find(emp => emp.id === employeeId);
            if (!employee) return;
            
            // 设置员工ID和假期类型
            document.getElementById('edit-leave-balance-employee-id').value = employeeId;
            document.getElementById('edit-leave-balance-type').value = leaveType;
            
            // 设置员工姓名
            document.getElementById('edit-leave-balance-employee-name').textContent = employee.name;
            
            // 设置假期类型文本
            const leaveTypeText = {
                'annual': '年假',
                'marriage': '婚假',
                'family': '探亲假',
                'maternity': '育儿假'
            };
            document.getElementById('edit-leave-balance-type-text').textContent = leaveTypeText[leaveType] || leaveType;
            
            // 设置当前余额
            document.getElementById('edit-leave-balance-value').value = currentValue;
            
            // 显示模态框
            editLeaveBalanceModal.classList.add('active');
        }
        
        // 关闭编辑假期余额模态框
        closeEditLeaveBalanceModal.addEventListener('click', () => {
            editLeaveBalanceModal.classList.remove('active');
        });
        
        cancelEditLeaveBalance.addEventListener('click', () => {
            editLeaveBalanceModal.classList.remove('active');
        });
        
        // 关闭提醒模态框
        document.getElementById('close-reminder-modal').addEventListener('click', () => {
            document.getElementById('reminder-modal').classList.remove('active');
        });
        
        document.getElementById('close-reminder-btn').addEventListener('click', () => {
            document.getElementById('reminder-modal').classList.remove('active');
        });
        
        // 保存假期余额
        saveLeaveBalance.addEventListener('click', () => {
            const employeeId = parseInt(document.getElementById('edit-leave-balance-employee-id').value);
            const leaveType = document.getElementById('edit-leave-balance-type').value;
            const value = parseInt(document.getElementById('edit-leave-balance-value').value);
            
            if (isNaN(value) || value < 0) {
                alert('请输入有效的天数');
                return;
            }
            
            // 更新假期余额
            const employeeIndex = employees.findIndex(emp => emp.id === employeeId);
            if (employeeIndex !== -1) {
                if (!employees[employeeIndex].leaveBalance) {
                    employees[employeeIndex].leaveBalance = {};
                }
                employees[employeeIndex].leaveBalance[leaveType] = value;
                
                // 显示成功提示
                alert('假期余额更新成功');
                
                // 更新假期余额列表
                generateLeaveBalanceList();
                
                // 关闭模态框
                editLeaveBalanceModal.classList.remove('active');
            } else {
                alert('未找到员工信息，更新失败');
            }
        });
    </script>
</body>
</html>
